<template>
	<!-- 工作管理 -->
	<view class="mine-container">
		<view class="home-top">
			<image src="../../static/img/grzx_bg.png"></image>
		</view>
		<view class="home-content">
			<view class="content-top">
				<view class="top-left" @click="goPersonalInfo">
					<view class="left-1">
						<image v-if="personInfo.userImage=='' || personInfo.userImage==null" src="../../static/touxiang-2.png"></image>
						<image v-else :src="personInfo.userImage"></image>
					</view>
					<view class="left-2">
						<view class="left-2-top">
							<view class="left-2-top-1">{{ personInfo.name }}</view>
							<view class="left-2-top-2">{{personInfo.userType}}</view>
						</view>
						<view class="left-2-bottom">部门:<text>{{ personInfo.groupName}}</text></view>
					</view>
				</view>
				<view class="top-right">
					<view class="top-right-1">晴</view>
					<view class="top-right-1">15°C</view>
				</view>
			</view>
			<view class="mine-head">
				<view class="mine-head-item" @click="handleHeadList(index)" v-for="(item,index) in headList" :key="index">
					<view class="item-top">{{ item.num }}</view>
					<view class="item-bottom">{{ item.text }}</view>
				</view>
			</view>
			<view class="mine-head2">
				<view class="mine-head2-top">
					<view class="top-left">管理网格<text>(2)</text></view>
					<view>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
				</view>
				<view class="mine-head2-bottom">
					<view class="mine-head2-bottom-item">塔坨社区</view>
					<view class="mine-head2-bottom-item">塔坨社区第四网格</view>
				</view>
			</view>
			<view class="work-content">
				<view class="work-content-head">功能管理</view>
				<view class="work-content-con">
					<view class="work-content-con-item" @click="handleRiChang(index)" v-for="(item,index) in RiChangList" :key="index">
						<view class="item-img">
							<image mode="widthFix" :src="item.img"></image>
						</view>
						<view class="item-text">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<view class="work-content2" @click="goPersonalInfo">
				<view class="work-content-head">个人信息</view>
				<view class="work-content2-con">
					<view class="work-content2-con-item">{{personInfo.userPolitical}}</view>
					<view class="work-content2-con-item">{{personInfo.userAge}}</view>
					<view class="work-content2-con-item">{{personInfo.userSex}}</view>
				</view>
				<view class="work-content2-con2">
					<view class="work-content2-con2-title">身份证号码:<text>{{personInfo.userIdCard}}</text></view>
					<view class="work-content2-con2-title">联系电话:<text>{{personInfo.userPhone}}</text></view>
					<view class="work-content2-con2-title">地址:<text>{{personInfo.userAdress}}</text></view>
				</view>
			</view>
			
			<view class="mine-footer">当前版本V1.0.0</view>
		</view>

		<u-popup v-model="midButton" mode="bottom" border-radius="30">
			<view class="midButton">
				<view class="midButton-head">选择您要添加的项目</view>
				<view class="midbutton-content">
					<view class="midbutton-content-item" v-for="(item,index) in midButtonList" :key="index" @click="handlemidButton(item.page)">
						<view class="item-top">
							<image :src="item.img"></image>
						</view>
						<view class="item-bottom">{{ item.text }}</view>
					</view>
				</view>
				<view class="midbutton-cacel" @click="midButton=false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridStaffArr:{},//员工信息集合
				personInfo: {
					name: '',
					groupName: '',
					userPolitical: 1,
					girderHeadImg: '../../static/img/iss063e076166.jpg',
					userIdCard: '',
					userAge: '',
					userPhone: '',
				},
				midButton: false,
				midButtonList: this.midButtonList,
				headList: [{
						num: 0,
						text: '日志'
					},
					{
						num: 0,
						text: '消息'
					}
				],
				RiChangList: [{
						img: '../../static/icon/shi12.png',
						text: '处置预案'
					},
					{
						img: '../../static/icon/shi7.png',
						text: '我的轨迹'
					},
					{
						img: '../../static/icon/shi9.png',
						text: '系统设置'
					},
					{
						img: '../../static/icon/shi6.png',
						text: '安全设置'
					}
				],
				gpsObj: {
					latitude: '',
					longitude: '',
					status: '',
					count: ''
				},
				jwd: {
					lat: '',
					log: '',
					address: {
						city: '',
						district: '',
						poiName: '',
						street: '',
						streetNum: '',
					}

				}
			}
		},
		onLoad() {
			uni.onTabBarMidButtonTap((e) => {
				this.midButton = true
			})
		},
		onShow() {
			this.midButton = false
		},
		mounted() {
			this.getPersonInfo()
			this.pageWorkLog()
		},
		methods: {
			// 日志数
			pageWorkLog() {
				this.$u.api.pageWorkLog()
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							this.headList[0].num = res.result.total
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			handlemidButton(url) {
				uni.navigateTo({url})
			},
			kaiqidingwei() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						that.jwd.lat = res.latitude;
						that.jwd.log = res.longitude;
						that.jwd.address.district = res.address.district
						that.jwd.address.city = res.address.city
						that.jwd.address.street = res.address.street
						that.jwd.address.streetNum = res.address.streetNum
						that.jwd.address.poiName = res.address.poiName
					},
					fail: function() {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});
			},
			isLocationPermissions() {
				gpsListener.isLocationPermissions(function(res) {
					console.log(res)
				})
			},
			requestLocationPermissions() {
				gpsListener.requestLocationPermissions();
			},
			initLocationListener() {
				//单位秒
				gpsListener.initLocationListener(2);
			},
			startLocationListener() {
				let that = this;
				gpsListener.initLocationListener(2);
				gpsListener.startLocationListener();
				var globalEvent = uni.requireNativePlugin('globalEvent');
				globalEvent.addEventListener('LocationEvent', function(res) {
					console.log(res)
					that.gpsObj.latitude = res.result.latitude
					that.gpsObj.longitude = res.result.longitude
					that.gpsObj.status = res.gpsResult.gPSStatusString
					that.gpsObj.count = res.gpsResult.gPSSatellites
					uni.showToast({
						title: that.gpsObj.latitude + that.gpsObj.longitude
					})
				});

			},
			stopLocation() {
				gpsListener.stopLocationListener()
			},
			//检测是否开启定位
			openGPS() {
				let system = uni.getSystemInfoSync(); // 获取系统信息
				if (system.platform === 'android') { // 判断平台
					var context = plus.android.importClass("android.content.Context");
					var locationManager = plus.android.importClass("android.location.LocationManager");
					var main = plus.android.runtimeMainActivity();
					var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
					if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
						uni.showModal({
							title: '提示',
							content: '请打开定位服务功能',
							showCancel: false, // 不显示取消按钮
							success() {
								if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
									var Intent = plus.android.importClass('android.content.Intent');
									var Settings = plus.android.importClass('android.provider.Settings');
									var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
									main.startActivity(intent); // 打开系统设置GPS服务页面
								} else {
									console.log('GPS功能已开启');
								}
							}
						});
					}
				}
			},
			handleHeadList(index) {
				if (index == 0) {
					uni.navigateTo({
						url: './WorkLog/WorkLog'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: './Announcement/Announcement'
					})
				}
			},
			handleRiChang(index) {
				if (index == 1) {
					uni.navigateTo({
						url: './location/location'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: './SystemSetting/SystemSetting'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: './SafeSetting/SafeSetting'
					})
				} else if (index == 0) {
					uni.navigateTo({
						url: './DisposalPlan/DisposalPlan'
					})
				}
			},
			goPersonalInfo() {
				uni.navigateTo({
					url: './PersonInfo/PersonInfo?gridStaff='+JSON.stringify(this.gridStaffArr)
				})
			},
			getPersonInfo() {
				this.$u.api.PersonInfo()
					.then(res => {
						// console.log(res)
						if (res.code == 200) {

							this.personInfo = res.result.mobileLonginUser
							
							if (this.personInfo.userPolitical == 1) {
								this.personInfo.userPolitical = '群众';
							} else if (this.personInfo.userPolitical == 2) {
								this.personInfo.userPolitical = '中共党员';
							} else if (this.personInfo.userPolitical == 3) {
								this.personInfo.userPolitical = '中共预备党员';
							} else if (this.personInfo.userPolitical == 4) {
								this.personInfo.userPolitical = '共青团员';
							}

							if (this.personInfo.userSex == 1) {
								this.personInfo.userSex = '男'
							} else if (this.personInfo.userSex == 2) {
								this.personInfo.userSex = '女'
							}
							
							let userType = res.result.mobileLonginUser.userType
							let type = ''
							if(userType.indexOf('1') >= 0){
								type = '网格员';
							} else if(userType.indexOf('2') >= 0) {
								type = '护路员'
							} else if(userType.indexOf('3') >= 0) {
								type = '政法委员'
							} else if(userType.indexOf('4') >= 0) {
								type = '群防群治队员'
							} else if(userType.indexOf('5') >= 0) {
								type = '协警'
							} else if(userType.indexOf('6') >= 0) {
								type = '领导'
							} else if(userType.indexOf('7') >= 0) {
								type = '小区物业管理员'
							} else if(userType.indexOf('8') >= 0) {
								type = '楼栋长'
							}
							this.personInfo.name = res.result.mobileLonginUser.userRealname
							this.personInfo.userType = type
							this.personInfo.userImage = res.result.gridStaff.userHeadImg
							this.personInfo.groupName = res.result.gridStaff.gridName
							
							this.gridStaffArr = res.result.mobileLonginUser
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container {
		min-height: 100vh;
		background-color: #f5f6f7;
		position: relative;

		.midButton {
			width: 100%;
			min-height: 50vh;
			padding: 20rpx;

			.midbutton-cacel {
				width: 100%;
				padding: 20rpx 0;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				border-top: 1px solid #f4f1f1;
			}

			.midButton-head {
				width: 100%;
				padding: 20rpx 0;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
			}

			.midbutton-content {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				padding: 20rpx 0;

				.midbutton-content-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					color: #333;
					font-size: 28rpx;
					width: 25%;
					margin: 10rpx 0;

					.item-top {
						width: 30px;
						height: 30px;
						margin-bottom: 10rpx;

						image {
							width: 30px;
							height: 30px;
						}
					}
				}
			}
		}

		.home-top {
			width: 100%;
			height: 30vh;
		}

		.home-content {
			position: absolute;
			top: 10rpx;
			left: 50%;
			width: 680rpx;
			min-height: 95vh;
			transform: translateX(-340rpx);
			.mine-footer {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				color: #999;
				background-color: #f5f6f7;
			}
			.content-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 20rpx 0 0;
				.top-left {
					display: flex;
					justify-content: center;
					align-items: center;

					.left-1 {
						width: 110rpx;
						height: 110rpx;

						image {
							border-radius: 50%;
						}
					}

					.left-2 {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-direction: column;
						height: 100rpx;
						margin-left: 20rpx;

						.left-2-top {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							color: #fff;

							.left-2-top-1 {
								font-size: 30rpx;
								font-weight: 600;
							}

							.left-2-top-2 {
								font-size: 22rpx;
								background-color: rgba(255, 255, 255, 0.4);
								width: 180rpx;
								height: 35rpx;
								border-radius: 20rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-left: 20rpx;
							}
						}

						.left-2-bottom {
							color: #fff;
							font-size: 24rpx;
							font-weight: 200;

							text {
								display: inline-block;
								margin-left: 10rpx;
							}
						}
					}
				}

				.top-right {
					display: flex;
					justify-content: space-around;
					align-items: flex-start;
					flex-direction: column;
					color: #fff;
					font-size: 30rpx;
					height: 100rpx;

					.top-right-1 {}

					.top-right-1 {}
				}
			}

			.mine-head {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 15rpx;
				.mine-head-item {
					width: 25%;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.item-top {
						font-size: 38rpx;
						font-weight: 600;
					}

					.item-bottom {
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
			}

			.mine-head2 {
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;
				box-shadow: 0 6px 6px #eee;
				margin: 30rpx 0;

				.mine-head2-top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.top-left {
						color: #000;
						font-size: 28rpx;
						font-weight: 600;

						text {
							display: inline-block;
							color: #007AFF;
							margin-left: 10rpx;
						}
					}
				}

				.mine-head2-bottom {
					margin-top: 10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;

					.mine-head2-bottom-item {
						padding: 2rpx 10rpx;
						background-color: #ecedfa;
						margin-right: 10rpx;
						border-radius: 8rpx;
						color: #007AFF;
					}
				}
			}

			.work-content {
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0 6px 6px #eee, 0 0 6px #eee, 0 0 6px #eee;
				padding: 10rpx 20rpx;

				.work-content-head {
					width: 100%;
					text-align: left;
					color: #000;
					font-size: 28rpx;
					padding: 20rpx 0;
					font-weight: 600;
				}

				.work-content-con {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.work-content-con-item {
						width: 25%;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;

						.item-img {
							width: 70rpx;
						}

						.item-text {
							color: #333;
							font-size: 28rpx;
							margin-top: 15rpx;
						}
					}
				}
			}

			.work-content2 {
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0 6px 6px #eee, 0 0 6px #eee, 0 0 6px #eee;
				padding: 10rpx 20rpx;
				margin-top: 30rpx;

				.work-content-head {
					width: 100%;
					text-align: left;
					color: #000;
					font-size: 28rpx;
					padding: 20rpx 0;
					font-weight: 600;
				}

				.work-content2-con {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.work-content2-con-item:nth-child(1) {
						color: #af4f4d;
						background-color: #fbd1cf;
					}

					.work-content2-con-item {
						padding: 2rpx 10rpx;
						font-size: 23rpx;
						color: #007AFF;
						background-color: #e9eefa;
						border-radius: 8rpx;
						margin-right: 10rpx;
					}
				}

				.work-content2-con2 {
					margin-top: 20rpx;

					.work-content2-con2-title {
						color: #333;
						font-size: 28rpx;
						font-weight: 400;
						margin: 10rpx 0;

						text {
							font-weight: normal;
							display: inline-block;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
